import {AfterViewInit, Component, Input, OnInit} from '@angular/core';

@Component({
  selector: 'app-chart-cabin-performance',
  templateUrl: './chart-cabin-performance.component.html',
  styleUrls: ['./chart-cabin-performance.component.css']
})
export class ChartCabinPerformanceComponent implements OnInit{
  @Input() units;
  private stu:boolean = false;
  sta4(){
    return this.stu;
  }
  private _data:any[];
  private chartOptionsWindSp;
  private chartSljpower;

  public chartData(title:string,from:number,to:number,unit:string,value?:number):any{
    return new Object( {
      chart: {
        type: 'gauge',
        plotBackgroundColor: null,
        plotBackgroundImage: null,
        plotBorderWidth: 0,
        plotShadow: false,
        backgroundColor: 'rgba(0,0,0,0)'
      },
      credits: {
        text: '',
        href: ''
      },
      title: {
        text: title,
        style:{'font-size':'12px'},
        y:30
      },
      pane: {
        startAngle: -150,
        endAngle: 150,
        background: [{
          backgroundColor: {
            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
            stops: [
              [0, '#FFF'],
              [1, '#333']
            ]
          },
          borderWidth: 0,
          outerRadius: '109%'
        }, {
          backgroundColor: {
            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
            stops: [
              [0, '#333'],
              [1, '#FFF']
            ]
          },
          borderWidth: 1,
          outerRadius: '107%'
        }, {
          // default background
        }, {
          backgroundColor: '#DDD',
          borderWidth: 0,
          outerRadius: '105%',
          innerRadius: '103%'
        }]
      },
      // the value axis
      yAxis: {
        min: from,
        max: to,
        minorTickInterval: 'auto',
        minorTickWidth: 1,
        minorTickLength: 10,
        minorTickPosition: 'inside',
        minorTickColor: '#666',
        tickPixelInterval: 30,
        tickWidth: 2,
        tickPosition: 'inside',
        tickLength: 10,
        tickColor: '#666',
        labels: {
          step: 2,
          rotation: 'auto'
        },
        title: {
          text: unit,
          y:15
        },
        plotBands: [{
          from: from,
          to: (to-from)/4,
          color: '#bf2e08' // red
        }, {
          from: (to-from)/4,
          to: (to-from)/3,
          color: '#5EDF6D' // green
        }, {
            from: (to-from)/3,
            to: 5*(to-from)/12,
            color: '#79b5df' // blue
          }, {
            from: 5*(to-from)/12,
            to: 7*(to-from)/12,
            color: '#dfa4b3' // pink
          }, {
          from: 7*(to-from)/12,
          to: 11*(to-from)/12,
          color: '#79b5df' // blue
        },{
          from: 11*(to-from)/12,
          to: to,
          color: '#414141' // gray
        }]
      },
      series: [{
        name: title,
        data: [value],
        tooltip: {
          valueSuffix: unit
        }
      }]
    })
  }

  ngOnInit() {
    this._data=[100,75];
    this.initChart(this._data);

    let ulength=0;
    for(let unit in this.units){
      ulength++;
    }

    if(ulength == 4){
      this.stu = true;
    }
  }
  private initChart(data:any[]) {
    let optsWindSp:any=this.chartData('有功(MW)',0,400,'MW',data[0]);
    let sljpower:any=this.chartData('水轮机效率(%)',0,100,'MW',data[1]);

    this.chartOptionsWindSp = optsWindSp;
    this.chartSljpower = sljpower;
  }
}
